<template>
  <div v-show="dialogValue" class="user1-add f-c">
    <BackPage title="精准帮办详情" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <TitleBox title="基本信息" />
      <div style="margin: 36px 0" class="c-table">
        <table>
          <tr>
            <td class="bg-td">
              项目名称
            </td>
            <td>{{ currentDetail.projectName }}</td>
            <td class="bg-td" rowspan="6">
              变更描述
            </td>
            <td rowspan="6">{{ currentDetail.content }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              附件资料
            </td>
            <td>
              <ClickDownload :file="currentDetail.file"/>
            </td>
          </tr>
          <tr>
            <td class="bg-td">
              服务状态
            </td>
            <td>
              <el-tag :type="currentDetail.statusType">{{ currentDetail.statusName }}</el-tag>
            </td>
          </tr>
          <tr>
            <td class="bg-td">
              联系人
            </td>
            <td>{{ currentDetail.contacts }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              联系方式
            </td>
            <td>{{ currentDetail.mobile }}</td>
          </tr>
          <tr>
            <td class="bg-td">
              提交时间
            </td>
            <td>{{ currentDetail.createTime }}</td>
          </tr>
        </table>
      </div>
      <template v-if="currentDetail.status === 1">
        <TitleBox title="帮办员服务详情" />
        <div style="margin: 36px 0" class="c-table">
          <table>
            <tr>
              <td class="bg-td">
                帮办员
              </td>
              <td>{{ serveUserInfo.realname }}</td>
              <td class="bg-td" rowspan="4">
                回复内容
              </td>
              <td rowspan="4">{{ serveUserInfo.answer }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                服务方式
              </td>
              <td>{{ currentDetail.solutionName }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                联系方式
              </td>
              <td>{{ serveUserInfo.iphone }}</td>
            </tr>
            <tr>
              <td class="bg-td">
                恢复时间
              </td>
              <td>{{ serveUserInfo.createTime }}</td>
            </tr>
          </table>
        </div>
        <TitleBox title="用户评价" />
        <div class="box" v-if="currentDetail.evaluationVo">
          <div class="box-item f-r a-c">
            <span>满意度：</span>
            <el-rate
              :value="currentDetail.evaluationVo && currentDetail.evaluationVo.satisfaction"
              disabled
              :max="5"
              show-score
              text-color="#ff9900"
              score-template="{value}"
            />
          </div>
          <div class="box-item">评价内容：</div>
          <div class="box-item">{{ currentDetail.evaluationVo && currentDetail.evaluationVo.content }}</div>
        </div>
        <div v-else class="box f-c j-c a-c">
          <img src="@/assets/empty_ap.png" style="width: 160px;height: 103px" />
          <div style="margin-top: 23px;margin-bottom:30px;font-size: 16px;color: #333333">暂无评价</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { http_accurate } from '@/api'
import { handleStatus, serve_way } from '@/dict'

export default {
  name: 'User1Add',
  data() {
    return {
      dialogValue: false,
      currentDetail: {},
      serveUserInfo: {},
      options2: [
        { name: '模拟审批', value: 1},
        { name: '外线报装', value: 2},
        { name: '预验收服务', value: 3},
        { name: '联合验收服务', value: 4},
        { name: '旧厂区改造服务', value: 5},
        { name: '全程帮办', value: 6},
      ]
    }
  },
  methods: {
    open(item) {
      this.currentDetail = item
      http_accurate.accurate.read({ id: item.id }).then(res => {
        this.currentDetail = res.data
        this.currentDetail.statusName = handleStatus.find(item => item.value == this.currentDetail.status)?.name
        this.currentDetail.statusType = handleStatus.find(item => item.value == this.currentDetail.status)?.type
        this.currentDetail.atypeName = this.options2.find(item => item.value == el.atype)?.name

        this.currentDetail.solutionName = serve_way[res.data.solution]
        if (res.data.answerList && res.data.answerList.length) {
          this.serveUserInfo = res.data.answerList[0]
        }
      })
      this.dialogValue = true
    },
    onPageBack() {
      this.dialogValue = false
    }
  }
}
</script>

<style scoped lang="scss">
.user1-add {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}
.box {
  margin: 34px 0;
  width: 100%;
  background: #F5FAFD;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #E4E5E7;
  padding: 24px 18px;
  padding-bottom: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  .box-item {
    margin-bottom: 15px;
  }
}
</style>
